<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title></title>
</head>
<body>
    <div id="app">
        <!-- 动态行内样式可以支持静态行内样式的写法  只不过要用小驼峰命名 -->
        <!-- <p :style="{opacity,color: 'pink',background:'blue',fontSize:'50px'}">你相信光吗</p>
        透明:<input type="text" placeholder="请输入值可以改文字透明" v-model="opacity"> -->

    <!-- 行内样式书写不透明度 -->
    <!-- <p :style="{opacity, color:'red', fontSize:'30px',background:'yellow'}">今天你作业写完了吗</p>
    <table>透明</table> <input type="text" v-model="opacity"> -->
    
    <!-- 行内样式只能写成对象的形式 -->
    <p :style="{opacity,}">清漪真漂亮</p>
    <input type="text" placeholder="请设置不透明度" v-model="opacity">

    <script src="./js/vue.js"></script>
    <script>
       const vm = new Vue({
            data:{
                //默认透明度
                opacity:1,
            }
        });

        vm.$mount("#app");
    </script>
</body>
</html>